<template>
  <div class="df cp w100p subHeaderColumn">
    <BarsOutlined class="mr6" style="margin-top: 3px" />
    <a-checkbox
      :indeterminate="state.indeterminate"
      :checked="state.checkAll"
      @change="onCheckAllChange"
    />
    <span class="ml6 fg1 fs1 f1">{{ attrs.data.columnName }}</span>
    <span class="rowFixed" v-if="attrs.data.freeze !== 1" @click="handlerFreeze"
      >冻结至此</span
    >
  </div>
  <draggable
    v-model="attrs.data.childrenList"
    item-key="index"
    tag="ul"
    filter=".unmover"
    draggable=".subColumnItem"
    @end="onDragEnd"
  >
    <template #item="{ element }">
      <li
        v-if="element.freeze !== 1"
        :key="element.key"
        class="subColumnItem cp df"
      >
        <BarsOutlined class="mr6" style="margin-top: 3px" />
        <a-checkbox
          :checked="element.isSelected === 1"
          :disabled="element.isMustSelected === 1"
          @change="onChange(element)"
        />
        <span class="ml6 fg1 fs1 f1">{{ element.columnName }}</span>
      </li>
    </template>
  </draggable>
</template>

<script setup>
import { reactive, useAttrs, watch } from 'vue'
import draggable from 'vuedraggable'
import { BarsOutlined } from '@ant-design/icons-vue'

const emits = defineEmits(['click'])
const attrs = useAttrs()

const state = reactive({
  indeterminate: false,
  checkAll: false
})
// 全选
const onCheckAllChange = e => {
  if (e.target.checked) {
    attrs.data.childrenList.map(item => {
      item.isSelected = 1
    })
  } else {
    attrs.data.childrenList.map(item => {
      item.isSelected = 0
    })
  }
}
const onChange = item => {
  if (item.isSelected === 1) {
    item.isSelected = 0
  } else {
    item.isSelected = 1
  }
}
const handlerFreeze = () => {
  emits('click', attrs.index)
}
watch(
  () => attrs.data.childrenList,
  val => {
    const checkedList = val.filter(item => item.isSelected === 1)
    state.indeterminate =
      !!checkedList.length && checkedList.length < val.length
    state.checkAll = val.length === checkedList.length
  },
  {
    immediate: true,
    deep: true
  }
)
</script>
<style lang="scss" scoped>
ul {
  /* max-height: 300px; */
  /* overflow-y: scroll; */
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 0;
  .subColumnItem {
    padding: 4px 26px !important;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.85);
  }
}

.subHeaderColumn,
.subColumnItem {
  &:hover {
    background: #f5f5f5;
    .rowFixed {
      display: block;
    }
  }
  .rowFixed {
    color: #1890ff;
    display: none;
  }
  &.unmover {
    background: #f5f5f5;
  }
}
</style>
